import React from "react";
import { inject, observer } from "mobx-react";

@inject("mv")
@observer
class MvDetailVideo extends React.Component {
  render() {
    return (
      <div style={{ float: "left", width: "65%" }}>
        {this.props.mv.mvDetail && (
          <h3 style={{ fontWeight: "700", fontSize: "16px" }}>
            <span
              style={{
                display: "inline-block",
                width: "35px",
                height: "24px",
                border: "1px solid red",
                fontSize: "14px",
                textAlign: "center",
                borderRadius: "6px",
                marginRight: "5px",
              }}
            >
              MV
            </span>
            {this.props.mv.mvDetail.name}
          </h3>
        )}
        {this.props.mv.mvUrl && (
          <video
            src={this.props.mv.mvUrl}
            controls="controls"
            style={{ width: "100%" }}
          ></video>
        )}
      </div>
    );
  }
}
export default MvDetailVideo;
